Saltar al contenido principal

AR Clip SDK

Crea experiencias AR en Unity que se abren en AR Clip como App Clip. Tu contenido WebGL se carga en streaming, y ARKit y AR Clip VPS se encargan de la localización.

Antes de empezar​

  • Unity 2020 LTS o posterior (probado con 2021+)
  • El destino de compilación WebGL
  • Acceso al AR Clip zip uploader
Prueba en un teléfono

En el Unity Editor, la mayoría de las API de AR Clip están envueltas en Application.isEditor. Para tener seguimiento real, compila para WebGL y prueba en la app móvil de AR Clip.

Instalar el paquete​

  1. Abre Window → Package Manager.
  2. Haz clic en + → Add package from Git URL….
  3. Pega https://github.com/WebAR-Studio/arclip_sdk.git y confirma.

Antes de importar, borra cualquier carpeta Assets/ARLib antigua. Si no, te saldrán errores de símbolos duplicados como este:

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

Importar los ejemplos​

En Package Manager → AR Clip → Samples:

  • Importa WebGLTemplates y copia la carpeta que se crea a la raíz de Assets/. Entonces aparece en Project Settings → Player → WebGL Template.
  • Importa TransparentBackground y mueve TransparentBackground.jslib a Assets/Plugins. Así WebGL tiene fondo transparente.

Preparar la escena​

  1. Añade un GameObject vacío llamado ARClipController.
  2. Añádele ARLibController y asigna una cámara al campo renderCamera.
  3. Desactiva el componente Camera de ese GameObject. Pon Clear Flags = Solid Color y usa RGBA(0,0,0,0) como fondo.
  4. Opcional: en el Editor, añade ARLibTester (de Samples) para simular las llamadas nativas.

Script de arranque mínimo​

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
[SerializeField] private Camera renderCamera;

private void OnEnable()
{
ARLibController.Initialized += HandleInitialized;
ARLibController.VPSPositionUpdated += HandleVpsPose;
}

private void OnDisable()
{
ARLibController.Initialized -= HandleInitialized;
ARLibController.VPSPositionUpdated -= HandleVpsPose;
}

private void Start()
{
ARLibController.SetRenderCamera(renderCamera);
ARLibController.Initialize();
}

private void HandleInitialized()
{
ARLibController.EnableCamera();
ARLibController.EnableAR();
ARLibController.EnableSurfaceTracking("horizontal");
}

private void HandleVpsPose(VPSPoseData pose)
{
Debug.Log($"VPS pose: {pose.Position}");
}
}

Iniciar la localización VPS​

Configura VPS después de la inicialización y antes de empezar la localización:

var settings = new VPSSettings
{
apiKey = "your-api-key",
locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

Escucha estos eventos:

  • ARLibController.VPSInitialized: VPS está listo.
  • ARLibController.VPSPositionUpdated: una nueva pose de localización.
  • ARLibController.OnVPSErrorHappened: un error, como cadena de texto.

Para ajustar cada cuánto se envían peticiones en una ubicación concreta, usa SetSendPhotoDelay, SetGpsAccuracyBarrier y SetFirstRequestDelay.

Seguimiento de imágenes y superficies​

  • Registra las imágenes con AddTrackingImage antes de activar el seguimiento. Espera a TrackedImagesArrayUpdate para confirmar que se han cargado.
  • Llama a EnableSurfaceTracking("horizontal" | "vertical" | "both") para detectar planos. Los resultados llegan por SurfaceTrackingUpdated.

Compilar y subir​

  1. Elige la plantilla WebGL. En Project Settings → Player → WebGL → Resolution and Presentation, elige la plantilla que copiaste del paquete.
  2. Compila. Usa File → Build Settings → WebGL → Build.
  3. Comprime. Comprime la compilación en un zip de modo que index.html quede en la raíz.
  4. Sube. Sube el archivo en el zip uploader.
  5. Prueba. Escanea el código QR que recibes con la app de AR Clip para iOS.

Solución de problemas​

  • No se ve la cámara en WebGL. Comprueba que TransparentBackground.jslib está en Assets/Plugins y que la cámara de renderizado está asignada y desactivada.
  • No llegan eventos AR en el modo Play del Editor. Es lo esperado. Usa ARLibTester o compila para WebGL para tener datos reales.
  • Errores de símbolos duplicados. Comprueba que borraste la carpeta ARLib antigua antes de importar el paquete.